<template>
  <!-- <a-drawer
    title="EF Report"
    placement="right"
    width="100%"
    class="fra-drawer fra-drawer-s"
    :closable="true"
    :mask="false"
    :visible="efReportVisible"
    @close="onClose"
  > -->

  <a-modal
    :mask-closable="false"
    :visible="efReportVisibleF"
    title="当前故障 - EF Report"
    :class="['c-dialog-box print-box',singlePage?'c-dialog-box-full':'']"
    :dialog-style="{height:'574px'}"
    :footer="null"
    :width="986"
    :z-index="modalZIndexM"
    :closable="!singlePage"
    centered
    destroy-on-close
    @cancel="onClose"
  >
    <span slot="closeIcon" class="c-close-icon"><a-icon :component="require('@/assets/icon/close.svg')" /></span>

    <span v-if="!singlePage" class="new-page-btn" @click="goNewPageHandler(eruuid)">
      <a-icon :component="require('@/assets/icon/newPage.svg')" />
    </span>
    <span class="new-page-btn" :style="{right:singlePage?'20px':'80px'}" @click="printpage">
      <a-icon type="printer" style="color:#ffffff" />
    </span>

    <a-spin :spinning="eventListByReportTypeLegIdLoading" class="c-dialog-search-box">
      <!-- info -->

      <a-row class="c-dialog-search-box-2">
        <a-col :span="2">
          <div class="fw-b fs-12 color-r">机号</div>
          <a class="fs-16 fw-b numbers" @click="setState({key:'flightLegHistoryVisible',payload:true})">{{ currentRow.tailnumber||'--' }}</a>
        </a-col>
        <a-col :span="3">
          <div class="fw-b fs-12 color-r">机队</div>
          <div class="fs-16 fw-b color-title numbers">{{ currentRow.fleet ||'--' }}</div>
        </a-col>
        <a-col :span="2">
          <div class="fw-b fs-12 color-r">航班</div>
          <a class="fs-16 fw-b  numbers" @click="setState({key:'flightLegDetailsVisible',payload:true})">{{ currentRow.flightNo||'--' }}</a>
        </a-col>
        <a-col :span="2">
          <div class="fw-b fs-12 color-r">航段</div>

          <div class="fs-16 fw-b color-title numbers">{{ $legHandler(currentRow.leg,currentRow.totalLeg) }}</div>
        </a-col>
        <a-col :span="5">
          <div class="fw-b fs-12 color-r">机场</div>
          <div class="fs-16 fw-b color-title">
            <a @click="airportInfoHandler(currentRow.dep)">{{ currentRow.dep }}</a>
            <span class="c-arrow color-s">····</span>
            <a @click="airportInfoHandler(currentRow.arr)">{{ currentRow.arr }}</a>
          </div>
        </a-col>
        <a-col :span="3">
          <div class="fw-b fs-12 color-r">日期</div>
          <div class="fw-b fs-13">
            <span class="fs-16 color-title">{{ currentRow.latestAcarsTime? $moment.utc(currentRow.latestAcarsTime).format('YYYY-MM-DD'):'--' }}</span>
          </div>
        </a-col>
        <a-col :span="5">
          <div class="fw-b fs-12 color-r">更新时间</div>
          <div class="fw-b fs-13">
            <span class="fs-16 color-title mr-4">{{ eventListByReportTypeLegIdData[0]&&eventListByReportTypeLegIdData[0].msgTime? $moment.utc(eventListByReportTypeLegIdData[0].msgTime).format('YYYY-MM-DD HH:mm:ss') :'--' }}</span>
          </div>
        </a-col>
      </a-row>
    </a-spin>

    <a-spin :spinning="eventListByReportTypeLegIdLoading" class="c-dialog-main-box beauty-scroll">
      <div>
        <div class="wgwx-title mt-16 fs-14 fw-b mb-10">EF ACARS Report</div>
        <div class="item-details-item-box">
          <div>{{ eventListByReportTypeLegIdData[0]?eventListByReportTypeLegIdData[0].msgType:'--' }} = Report Type</div>
          <div>{{ eventListByReportTypeLegIdData[0]&&eventListByReportTypeLegIdData[0].partNumber?eventListByReportTypeLegIdData[0].partNumber.join('，'):'--' }} = CMC or LDI Part Number</div>
          <div>{{ eventListByReportTypeLegIdData[0]?eventListByReportTypeLegIdData[0].computorSource:'--' }} = CMC Computer Source</div>
        </div>
        <div v-for="item in tData" :key="item.id" class="cu-pointer" @click="(e)=>clickEvent(e,item)">

          <a-row class="item-details-item-box">
            <a-col :span="2">
              <noticePriorityIcon :is-etops="item.isEtops" :priority="item.priority" :msg-type="item.name" />
            </a-col>
            <a-col :span="22">
              <a-row>
                <a-col :span="2">
                  <span class="fs-15 mt-10 fw-b mr-10">{{ item.name }}</span>
                </a-col>
                <a-col :span="3">
                  <a class="fw-b">{{ item.code||'--' }}</a>
                </a-col>
                <a-col :span="13">
                  <a class="fw-b ">{{ item.description||'--' }}</a>
                </a-col>
                <a-col :span="4">
                  <div class="fs-14 fw-500">{{ item.msgTime? $moment.utc(item.msgTime).format('YYYY-MM-DD HH:mm') :'--' }}</div>
                </a-col>
                <a-col :span="2">
                  <div class="fw-b">{{ item.activity?activeHandler(item.activity):'--' }}</div>
                </a-col>

                <a-col v-for="ci in item.eventDetails" :key="ci.id" :span="24">
                  <a-row>
                    <a-col :offset="2" :span="16 ">
                      <div class="fs-13 text-over">
                        <span class="mr-10 fw-b">{{ ci.name||'--' }}</span>
                        <a>{{ ci.code ||'--' }}</a>
                        <!-- <span class="ml-10">Intermittence：{{ ci.intermittence||'--' }}{{ ci.intermittenceNum||'' }}</span> -->
                        <div class="fs-12">{{ ci.description ||'事件名称未找到，请联系管理员' }}</div>
                        <div class="fs-12 d-flex">
                          <span>Detected by：</span>
                          <div>
                            <div v-for="dbItem in ci.detectedBy" :key="dbItem">{{ dbItem }}</div>
                          </div>
                        </div>
                      </div>
                    </a-col>
                    <a-col :span="4">
                      <div class="fs-14 fw-500">{{ ci.msgTime? $moment.utc(ci.msgTime).format('YYYY-MM-DD HH:mm') :'--' }}</div>
                    </a-col>
                    <a-col :span="2">
                      <div class="fw-b">{{ ci.activity?activeHandler(ci.activity):'--' }}</div>
                    </a-col>
                  </a-row>
                </a-col>

              </a-row>
            </a-col>
          </a-row>
        </div>

        <div class="wgwx-title mt-16 fs-14 fw-b mb-10">非关联维护信息</div>
        <div v-for="item in bData" :key="item.id" class="cu-pointer" @click="(e)=>clickEvent(e,item)">

          <a-row class="item-details-item-box">
            <a-col :span="2">
              <noticePriorityIcon :is-etops="item.isEtops" :priority="item.priority" :msg-type="item.name" />
            </a-col>
            <a-col :span="22">
              <a-row>
                <a-col :span="2">
                  <span class="fs-15 mt-10 fw-b mr-10">{{ item.name }}</span>
                </a-col>
                <a-col :span="13">
                  <a class="fw-b">{{ item.code||'--' }}</a>
                </a-col>

                <a-col :span="4" :offset="3">
                  <div class="fs-14 fw-500">{{ item.msgTime? $moment.utc(item.msgTime).format('YYYY-MM-DD HH:mm') :'--' }}</div>
                </a-col>
                <a-col :span="2">
                  <div class="fw-b">{{ item.activity?activeHandler(item.activity):'--' }}</div>
                </a-col>
                <a-col :span="24">
                  <span class="fs-12 ">{{ item.description||'--' }}</span>
                </a-col>
                <a-col :span="24">
                  <div class="fs-12 d-flex">
                    <span>Detected by：</span>
                    <div>
                      <div v-for="dbItem in item.detectedBy" :key="dbItem">{{ dbItem }}</div>
                    </div>
                  </div>
                </a-col>
                <a-col v-for="ci in item.eventDetails" :key="ci.id" :span="24">
                  <a-row>
                    <a-col :offset="2" :span="16 ">
                      <div class="fs-13 text-over">
                        <span class="mr-10 fw-b">{{ ci.name||'--' }}</span><a>{{ ci.code ||'--' }}</a>
                        <div>{{ ci.description ||'--' }}</div>
                      </div>
                    </a-col>
                    <a-col :span="4">
                      <div class="fs-14 fw-500">{{ ci.msgTime? $moment.utc(ci.msgTime).format('YYYY-MM-DD HH:mm') :'--' }}</div>
                    </a-col>
                    <a-col :span="2">
                      <div class="fw-b">{{ ci.activity?activeHandler(ci.activity):'--' }}</div>
                    </a-col>
                  </a-row>
                </a-col>

              </a-row>
            </a-col>
          </a-row>
        </div>

      </div>
    </a-spin>
  </a-modal>

  <!-- </a-drawer> -->
</template>

<script>
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
// import dotHistory from '@/pages/components/dotHistory';

export default {
  // components: {
  //   dotHistory
  // },
  props: {
    // currentRow: {
    //   type: Object,
    //   default: () => {}
    // },
    efReportVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      modalZIndexM: 2000,
      currentRow: {},
      eruuid: ''
    };
  },
  computed: {
    ...mapState('fraMonitoring', [
      'eventListByReportTypeLegIdData',
      'eventListByReportTypeLegIdLoading',
      'modalZIndex'
    ]),
    ...mapGetters('fraMonitoring', [
      'efReportVisibleF'
    ]),
    tData() {
      return this.eventListByReportTypeLegIdData.filter(item => {
        return item.name !== 'MMSG' && !(item.name === 'Alert' || item.eventType === 'Alert' || item.msgType === 'Alert');
      });
    },
    bData() {
      return this.eventListByReportTypeLegIdData.filter(item => item.name === 'MMSG');
    },
    alertData() {
      return this.eventListByReportTypeLegIdData.filter(item => {
        return item.name === 'Alert' || item.eventType === 'Alert' || item.msgType === 'Alert';
      });
    },
    // efReportVisibleF() {
    //   return this.efReportVisible || (this.$route.meta?.singlePage ?? false);
    // },
    singlePage() {
      return ((this.$route.meta?.singlePage ?? false) && this.$route.query.rp === 'efReportVisible');
    }

  },
  watch: {
    // 'currentRow'(nv) {
    //   if (this.efReportVisible) {
    //     const params = {
    //       reportType: 'EFFDE',
    //       legId: nv.id,
    //       tailNumber: nv.tailnumber
    //     };
    //     this.getEventListByReportTypeLegId(params);
    //   }
    // },
    'efReportVisibleF': {
      handler(nv) {
        if (nv) {
          this.setState({ key: 'modalZIndex', payload: this.modalZIndex + 1 });
          this.modalZIndexM = this.modalZIndex;
          this.eruuid = this.$route?.query?.eruuid ?? new Date().getTime();
          const lsRow = sessionStorage.getItem(`er${this.eruuid}`) ?? localStorage.getItem('scRow') ?? localStorage.getItem('row');

          this.currentRow = JSON.parse(lsRow) ?? {};

          if (this.$store.state.setting.openType === '_blank' && !this.$route?.query?.eruuid) {
            this.goNewPageHandler(this.eruuid);
            this.setState({ key: 'efReportVisible', payload: false });
          } else {
            const params = {
              reportType: 'EFFDE',
              legId: this.currentRow.id,
              tailNumber: this.currentRow.tailnumber
            };
            this.getEventListByReportTypeLegId(params);
          }
        } else {
          if (nv === false && this.$store.state.setting.openType !== '_blank') {
            localStorage.removeItem('scRow');
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    ...mapActions('fraMonitoring', [
      'getEventListByReportTypeLegId'
    ]),
    ...mapMutations('fraMonitoring', [
      'setState'
    ]),
    airportInfoHandler(code) {
      this.setState({ key: 'airportInfoVisible', payload: true });
      localStorage.setItem('apInfoCode', code);
    },
    clickEvent(e, eItem) {
      this.setState({ key: 'eventDetailsVisible', payload: true });
      const currentRow = { event: { ...this.currentRow, ...eItem }, ...this.currentRow };
      localStorage.setItem('eRow', JSON.stringify(currentRow));
    },
    printpage() {
      const ph = document.querySelector('.print-box .ant-modal').style.height;
      document.querySelector('.print-box .ant-modal').style.height = 'auto';
      this.$nextTick(() => {
        this.$print(document.querySelector('.print-box .ant-modal-content'), {
          printDoneCallBack: () => {
            document.querySelector('.print-box .ant-modal').style.height = ph;
          }
        });
      });
    },
    // 当drawer点击关闭
    onClose() {
      this.$emit('close', 'efReportVisible');
    },
    goNewPageHandler(eruuid = '') {
      sessionStorage.setItem(`er${eruuid}`, JSON.stringify(this.currentRow));

      const routeData = this.$router.resolve({
        path: '/reportsLayout',
        query: {
          rp: 'efReportVisible',
          eruuid
        }
      });

      window.open(routeData.href, '_blank');
    }
  }
};
</script>

<style lang="less" >
@import './index.less';
</style>
